<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2d转换之translate 类似定位</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink; 
             /* x y 可以理解为宽 和高的走向 中间必须英文逗号隔开 */
            /* transform: translate(100px,100px); */
               /* 单写一个x轴 */
            /* transform: translate(100px,0); */
            /* 可以简写 y 同理 */
            /* transform:translatex(100px); */
        }
        /* 2d移动translate 不会影响其他元素位置 */
        div:first-child {
            background-color: purple;
           transform: translate(100px, 100px );
        }
        
        

    </style>
</head>

<body>
    <div></div>
    <div></div>
   
</body>

</html>